<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器*/
        [v-cloak] {
            display: none;
        }

        .title {
            border: 2px solid gold;
        }

        .p1 {
            text-decoration: underline;
        }

        .p11 {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="app">


    <!--if elseif elseif... else-->
    <p v-if="status == 1">
        我是状态1
    </p>
    <p v-else-if="status == 2">
        我是状态2
    </p>
    <p v-else-if="status == 3">
        我是状态3
    </p>
    <p v-else>
        默认状态
    </p>


</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {

            status: 1,
        }
    })
</script>

</html>
